<template>
  <div
    id="gapsum"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <!-- <v-title title="资源看板-业务维度"></v-title> -->
    <el-card class="box-card">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="项目人员明细" name="first">
            <el-row style="margin: 25px 0 25px 0px">
                  <label for="cascader" style="margin: 10px 0 10px 0px;">选择项目:</label>
                  <el-cascader
                    placeholder="请选择项目"
                    :props="props"
                    :options="singleSelector"
                    filterable
                    clearable
                    collapse-tags
                    :show-all-levels="false"
                    @change="searchPro"
                    style="margin-left: 10px"
                  >
                  </el-cascader>
                  <span class="col-span" style="margin-left:30px">时间段：</span>
                  <el-date-picker
                      v-model="dateRange"
                      @change="changeDateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                  <span class="col-span" style="margin-left:30px">项目状态：</span>
                  <el-select
                    v-model="value2"
                    multiple
                    clearable
                    collapse-tags
                    style="margin-left: 20px;"
                    placeholder="请选择"
                    @change="filterStatus($event)">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              <el-button type="warning" round style="float:right" @click="down">导出</el-button>
            </el-row>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#eef1f6',height:'80px' }"
              max-height='750'
            >
              <el-table-column prop="date" label="项目名" width="180" align="center" fixed="left">
                  <template slot-scope="scope">
                      {{ scope.row.project_name}}
                  </template>
              </el-table-column>
              <!-- <el-table-column label="事业群" width="180" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.group_name}}
                  </template>
              </el-table-column> -->
              <el-table-column label="立项事业部"  width="150" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.dept_name}}
                  </template>
              </el-table-column>
              <el-table-column label="项目状态" align="center" width="80">
                  <template slot-scope="scope">
                    {{ scope.row.project_status}}
                  </template>
              </el-table-column>
              <el-table-column label="员工姓名" align="center" width="180">
                  <template slot-scope="scope">
                    <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                    </div>
                    <div v-if="scope.row.user_info.length == '1'">
                      <div v-for="(v,i) in scope.row.user_info" :key="i">
                        {{ v.user_name }}
                      </div>
                    </div>
                    <div v-if="scope.row.user_info.length > '1'">
                      <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                        {{ v.user_name }}
                      </div>
                    </div>
                  </template>
              </el-table-column>

              <el-table-column label="员工所属一级部门" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.department_name }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.department_name }}
                        </div>
                      </div>
                  </template>
              </el-table-column>

              <el-table-column label="员工所属二级部门" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.dept2_name }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.dept2_name }}
                        </div>
                      </div>
                  </template>
              </el-table-column>

              <el-table-column label="员工所属三级部门" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.dept3_name }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.dept3_name }}
                        </div>
                      </div>
                  </template>
              </el-table-column>

              <el-table-column label="员工类型" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.type }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.type }}
                        </div>
                      </div>
                  </template>
              </el-table-column>
               <el-table-column label="最后更新人" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.up_user }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.up_user }}
                        </div>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column label="最后更新时间" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          {{ v.up_time }}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                          {{ v.up_time }}
                        </div>
                      </div>
                  </template>
              </el-table-column>

              <el-table-column label="人员技术领域" align="center" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0'">
                        {{ "-" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i">
                          <el-tooltip placement="top" effect="light">
                              <div slot="content" v-for="(val,ind) in v.technical_field_names" :key="ind">
                                <div style="line-height: 20px">{{val}}</div>
                              </div>
                              <div v-for="(val,ind) in v.technical_field_names" :key="ind">
                                <el-tag type="primary">{{val.length > 8 ? val.substring(0,13) + '...' : val + '...'}}</el-tag>
                              </div> 
                            </el-tooltip>
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(v,i) in scope.row.user_info" :key="i" class="bordersA">
                           <el-tooltip placement="top" effect="light">
                              <div slot="content" v-for="(val,ind) in v.technical_field_names" :key="ind">
                                <div style="line-height: 20px">{{val}}</div>
                              </div>
                              <div v-for="(val,ind) in v.technical_field_names" :key="ind">
                                <el-tag type="primary">{{val.length > 8 ? val.substring(0,13) + '...' : val + '...'}}</el-tag>
                              </div> 
                            </el-tooltip>
                        </div>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column align="center" type="cell" v-for="(v,i) in weekList" :key="i" :property="v" :label="week2date(v)" width="180">
                  <template slot-scope="scope">
                      <div v-if="scope.row.user_info.length == '0' || !scope.row.user_info.length">
                        {{ "0.0" }}
                      </div>
                      <div v-if="scope.row.user_info.length == '1'">
                        <div v-for="(val,i) in scope.row.user_info" :key="i"> 
                          {{ val.spend_week[v]}}
                        </div>
                      </div>
                      <div v-if="scope.row.user_info.length > '1'">
                        <div v-for="(val,i) in scope.row.user_info" :key="i" class="bordersA">
                          <span v-if="val.spend_week[v]">
                            {{ val.spend_week[v].toFixed(1) }}
                          </span>
                          <span v-else>
                            {{ '0.0' }}
                          </span>
                        </div>
                      </div>
                  </template>
              </el-table-column>
            </el-table>
            <el-pagination 
              v-show="tableTotal > 12" 
              background 
              layout="prev, pager, next" 
              :page-size="params.pageSize" 
              @size-change="pageSizeChange1" 
              @current-change="pageNoChange1" 
              :current-page="params.pageNo" 
              style="text-align: center" 
              :total="tableTotal">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="项目工时汇总" name="third">
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                    <div id="reportrange" class="form-control">
                    <div class="block">
                        <el-row class="bgColor">
                        <el-col :xs="24" :sm="24" :lg="24">
                            <div class="item">
                            <label for="cascader">事业部:</label>
                            <el-cascader
                                clearable
                                placeholder="请选择"
                                :options="deptOptions3"
                                filterable
                                :show-all-levels="false"
                                :collapse-tags="true"
                                v-model="dept3"
                                @change="deptSearch3"
                                :props="props"
                                style="margin-left: 10px; width:12%"
                                id="cascader"
                                >
                            </el-cascader>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 60%">
                            <label for="select" style="margin-right: 20px">主技术/产品中心:</label>
                            <el-select
                            v-model="Produnction3"
                            multiple
                            @change="tecSearch"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 150px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in ProdunctionOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -24px;margin-left: 30%">
                            <label for="select" style="margin-right: 20px">项目状态:</label>
                            <el-select
                            v-model="proStatus3"
                            multiple
                            @change="proStatusSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 150px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in ProStatusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        
                        </el-row>
                        <el-row >
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 25px">
                            <label for="select" style="margin-right: 20px">资源分类:</label>
                            <el-select
                            v-model="recourse3"
                            @change="recourseSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable  
                            style="width: 150px;margin-top: -70px;margin-right: 34%;width:12%">
                            <el-option
                                v-for="item in recourseOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 30%;">
                            <label for="select" style="margin-right: 20px">客户:</label>
                            <el-select
                            v-model="cusDept3"
                            multiple
                            @change="cusDeptSearch3"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 250px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in cusDeptOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                            
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: -25px;margin-left: 60%;">
                        <label for="select" style="margin-right: 20px">实施部门:</label>
                            <el-select
                            v-model="ssbm"
                            multiple
                            @change="searchSsbm"
                            placeholder="请选择"
                            collapse-tags
                            clearable
                            filterable
                            style="width: 250px;margin-top: -70px;margin-right: 34%;">
                            <el-option
                                v-for="item in SsbmOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                            </el-select>
                          </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top: 28px">
                            <label for="select" style="margin-right: 20px">技术领域:</label>
                            <el-cascader
                            style="width: 150px;"
                            placeholder="请选择"
                            :options="tecAreaOptions"
                            :props="props"
                            @change="tecAreaSearch3"
                            collapse-tags
                            clearable
                            filterable
                            ref="tree2"></el-cascader>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="24" style="margin-top:-35px">
                            <label for="select" style="margin-right: 20px;margin-left: 30%">时间段:</label>
                            <el-date-picker
                            v-model="value3"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="changeDateRange3">
                            </el-date-picker>
                        </el-col>
                        </el-row>
                    </div>
                    </div>
                </el-col>
                <el-button type="primary" plain round style="float: right; margin: 10px 0 10px 0;" @click="down3()">导出</el-button>
            </el-row>
            <el-card class="box-card">
            <el-table 
            :data="tableData3"
            border 
            max-height="700"  
            v-loading="loading3" 
            element-loading-text="拼命加载中" 
            element-loading-spinner="el-icon-loading" 
            show-summary 
            :summary-method="getSummaries3"
            >
                <el-table-column prop="project_name" label="项目" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="dept" label="立项事业部" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="core" label="主技术/产品中心" min-width="100" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="project_manager" label="PM" min-width="70" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="status" label="项目状态" min-width="90" align="center" fixed="left">
                </el-table-column>
                 <el-table-column prop="kh_zh" label="客户简称" min-width="90" align="center" fixed="left">
                </el-table-column>
                <el-table-column  label="实施部门" min-width="180" align="center" fixed="left">
                  <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.site_power_dept_name" :key="i">
                       {{v}}
                    </div>
                   
                  </template> 
                </el-table-column>
                <el-table-column label="资源分类" min-width="130" align="center" fixed="left">
                <template slot-scope="scope"> 
                    <div v-if="tab3==='0'">
                    <div class="borders" v-if="scope.row.type[0].label==='need'"  >{{ "需求" }}</div>
                    <div class="borders1" v-if="scope.row.type[1].label==='get'" >{{ "供给" }}</div>
                    <div class="borders2" v-if="scope.row.type[2].label==='gap'" >{{ "GAP"  }}</div>
                    </div>

                    <div v-else>
                    <div v-show="tab3==='1'">
                        <div v-if="scope.row.type[0].label==='need'">{{ "需求" }}</div>
                    </div>

                    <div v-show="tab3==='2'">
                        <div v-if="scope.row.type[1].label==='get'">{{ "供给" }}</div>
                    </div>

                    <div v-show="tab3==='3'">
                        <div v-if="scope.row.type[2].label==='gap'">{{ "GAP" }}</div>
                    </div>
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="汇总" min-width="180" align="center" type="cell">
                <template slot-scope="scope">
                    <div v-if="tab3==='0'">
                        <div class="borders">{{ scope.row.type[0].sum_value | rounding }}</div>
                        <div class="borders1">{{ scope.row.type[1].sum_value | rounding }}</div>
                        <div class="borders2">{{ scope.row.type[2].sum_value | rounding }}</div>
                    </div>
                    <div v-else>
                        <div v-show="tab3==='1'">
                            <div>{{ scope.row.type[0].sum_value | rounding }}</div>
                        </div>
                        <div v-show="tab3==='2'">
                            <div >{{ scope.row.type[1].sum_value | rounding }}</div>
                        </div>

                        <div v-show="tab3==='3'">
                            <div >{{ scope.row.type[2].sum_value | rounding }}</div>
                        </div>
                    </div>
                </template>
                </el-table-column>
                <el-table-column :prop="v" v-for="(v,i) in monthRange3"  :label="v+'月'" width="180" align="center" :key="i" type="cell">
                <template slot-scope="scope">
                    <div v-if="tab3==='0'">
                    <div class="borders">{{ scope.row.type[0].value[v] | rounding }}</div>
                    <div class="borders1" >{{ scope.row.type[1].value[v] | rounding }}</div>
                    <div class="borders2" >{{ scope.row.type[2].value[v] | rounding }}</div>
                    </div>

                    <div v-else>
                    <div v-show="tab3==='1'">
                        <div>{{ scope.row.type[0].value[v] | rounding }}</div>
                    </div>
                    <div v-show="tab3==='2'">
                    <div >{{ scope.row.type[1].value[v] | rounding }}</div>
                    </div>
                    <div v-show="tab3==='3'">
                        <div >{{ scope.row.type[2].sum_value | rounding }}</div>
                    </div>
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <!-- <el-pagination
                class="marT"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="baseSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                style="margin-top:10px;margin-left:34%"
                >
            </el-pagination> -->
            </el-card>
          </el-tab-pane>
        </el-tabs>
        
      </div>
    </el-card>
  </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
import VTitle from '@/views/sys/internetThings/title';
import { DateUtil } from './utils.js'

export default {
  name: 'gapSum',
  components: {
    VTitle,
  },
  filters: {
    rounding (value) {
      if(value || value === 0) { //这个判断是为了防止数据为空，页面渲染为NAN
        return Number(value).toFixed(1)
      }
    }
  },
  data() {
    return {
      SsbmOptions:[],
      ssbm:'',
      tab3:'0',
      value3:'',
      tecArea3:'',
      cusDept3:'',
      recourse3:'',
      ProStatusOption3:[],
      proStatus3:'',
      Produnction3:'',
      deptOptions3:[],
      dept3:'',
      paramsData3:{},
      current3:1,
      baseSize3:10,
      total3:0,
      monthRange3:[],
      tableData3:[],
      loading3:false,
      tabName:'first',
      tecAreaOptions:[],
      cusDeptOptions:[],
      recourseOptions:[    
        {
          value:"需求",
          label:"需求"
        },
        {
          value:"供给",
          label:"供给"
        },
        {
          value:"GAP",
          label:"GAP"
        }
      ],
      ProStatusOption:[],
      ProdunctionOptions:[],
      props: { multiple: true },
      activeName: 'first',
      loading3: false,




      statusOptions:[
        {'label':'变更','value':0},
        // {'label':'封存','value':1},
        {'label':'结项','value':2},
        {'label':'立项','value':3},
        // {'label':'终止','value':4},
        {'label':'研发结项','value':5},
        {'label':'预立项','value':6},
        // {'label':'潜在项目','value':7},
      ],
      value2:'',
      props: { multiple: true },
      singleSelector:[],
      departmentFilterData:[],
      radio: 1,
      selectedDep: '',
      activeName: 'first',
      tableTotal:0,
      params: {
        pageNo: 1,
        pageSize: 12,
        dept_ids:[]
      },
      temp:[],
      projectList:[],
      start_date: '',
      end_date: '' ,
      start_date1: '',
      end_date1: '' ,
      dateRange: [],
      dateRange1: [],
      pramData:{},
      pramData1:{},
      loading: false,
      tableData: [],
      weekList:[],
      weekList1:[],
    };
  },
  created(){
    this.getOptions()
    this.defaultWeekTime()
    this.getTableData()
  },
  mounted(){
   this.getProdunctionOptions()
   this.getProStatusOption()
   this.getCusDept()
   this.getTecAreaOptions()
   this.getDeptOptions3()
   this.getTableData3()
  },
  watch:{
  },
  methods: {
    tecSearch(val){
         if(this.tabName==="third"){
          console.log(val)
            this.paramsData3["cores"] = val
            this.current1 = 1
            this.getTableData3()
         }
    },
    searchSsbm(v){
      this.paramsData3["demand_dept_ids"] = v
      this.current3 = 1
      this.getTableData3()
    },
    down3(){
       this.loading3 = true
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/data_to_excel',
          method: "get",
          headers: getHeaderName(),
          responseType: 'blob',
        }).then(res => {
          if(res.status === 200) {
            this.loading3 = false
            const blob = new Blob([res.data]);
            const fileName = '项目工时汇总.xlsx';
            // for IE
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
              // for Non-IE (chrome, firefox etc.)
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
              this.loading3 = false
              this.$message({
              type:"success",
              message:"导出成功!"
            })
          }
          } else {
            this.loading3 = false
            this.$message.error('下载出错了!'); 
          }
        }).catch(err => {
            this.$message.error('下载出错了!'); 
            this.loading3 = false
        })
    },
    getSummaries3(param) {
      const { columns, data } = param;
      const sums = [];
      //循环处理所有列数据
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }else if(index === 7){
          if(this.tab3==="0"){
            var word111 = <div class="borders">{'总需求'}</div>
            var word222 = <div class="borders1">{'总实际'}</div>
            var word333 = <div class="borders2">{'总GAP'}</div>
            sums[index] = [word111,word222,word333];
          }if(this.tab3==="1"){
            var word1111 = <div>{'总需求'}</div>
            sums[index] = [word1111];
          }if(this.tab3==="2"){
            var word1111 = <div>{'总实际'}</div>
            sums[index] = [word1111];
          }if(this.tab3==="3"){
            var word1111 = <div>{'总GAP'}</div>
            sums[index] = [word1111];
          }
          
          return;
        }else if(index === 5){
          const sumNeed3 = data.map(item => {
            if(column.type == 'cell'){
              let spendNeed3 = item.type[0].sum_value.toFixed(1)
              return spendNeed3
            }
          });
           const sumGet3 = data.map(item => {
            if(column.type == 'cell'){
              let spendGet3 = item.type[1].sum_value.toFixed(1)
              return spendGet3
            }
          });
          const sumGap3 = data.map(item => {
            if(column.type == 'cell'){
              let spendGap3 = item.type[2].sum_value.toFixed(1)
              return spendGap3
            }
          });
          if (!sumNeed3.every(value => isNaN(value))) {
            var cnum1Need3 = sumNeed3.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            var cnum1Get3 = sumGet3.reduce((prev, curr) => {
              const value = Number(curr);
                if (!isNaN(value)) {
                  return Number(prev) + Number(curr)
                } else {
                  return Number(prev)
                }
            }, 0);
            var cnum1Gap3 = sumGap3.reduce((prev, curr) => {
            const value = Number(curr);
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0);
            if(this.tab3==="0"){
              var chtml1Need3 = <div class="borders">{cnum1Need3.toFixed(1)}</div>
              var chtml2Need3 = <div class="borders1">{cnum1Get3.toFixed(1)}</div>
              var chtml3Need3 = <div class="borders2">{cnum1Gap3.toFixed(1)}</div>
              sums[index] = [chtml1Need3,chtml2Need3,chtml3Need3]
            }if(this.tab3==="1"){
              var cword33 = <div>{cnum1Need3.toFixed(1)}</div>
              sums[index] = [cword33];
            }if(this.tab3==="2"){
              var cword33 = <div>{cnum1Get3.toFixed(1)}</div>
              sums[index] = [cword33];
            }if(this.tab3==="3"){
              var cword33 = <div>{cnum1Gap3.toFixed(1)}</div>
              sums[index] = [cword33];
            }
          }
        }else if(index >5){
          //将每列的所有数据数字化处理成一个数组
        const values111 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[0].value
            if(index === 2){
              obj = item.type[0].sum_value
            }
             let spendTime1
             spendTime1 = obj[column.property]
             return spendTime1
          } else {
             return NaN
          }
        });
       
        const values222= data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].value
            let spendTime2 = 0
            spendTime2 = obj[column.property]
             return spendTime2
          } else {
             return NaN
          }
        });
        const values222Gap= data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].value
            if(obj[column.property]){
              let spendTime2Gap = obj[column.property].toFixed(1)
              return spendTime2Gap
            }
          } else {
             return NaN
          }
        });

        const values333 = data.map(item => {
            if(column.type == 'cell') {
              let obj = item.type[0].sum_value
              let spendTime3 = 0
              spendTime3 = obj
              return spendTime3
            } else {
              return NaN
            }
          });

        const values444 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[1].sum_value
            let spendTime4 = 0
            spendTime4 = obj
            return spendTime4
          } else {
            return NaN
          }
        });

        const values444Gap = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.type[2].sum_value
            let  spendTime4Gap = obj
            return spendTime4Gap
          } else {
            return NaN
          }
        });
        if (!values111.every(value => isNaN(value))) {
          var num111 = values111.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num222 = values222.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num222Gap = values222Gap.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab3==="0"){
            var html111 = <div class="borders">{num111}</div>
            var html222 = <div class="borders1">{num222}</div>
            var html333 = <div class="borders2">{num222Gap}</div>
            sums[index] = [html111,html222,html333]
          }if(this.tab3==="1"){
            var word3333 = <div>{num111}</div>
            sums[index] = [word3333];
          }if(this.tab3==="2"){
             var word3333 = <div>{num222}</div>
            sums[index] = [word3333];
          }if(this.tab3==="3"){
             var word3333 = <div>{num222Gap}</div>
            sums[index] = [word3333];
          }
         
        }
        else{
          var num333 = values333.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num444 = values444.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          var num444Gap = values444Gap.reduce((prev, curr) => {
            const val = Number(curr);
            if (!isNaN(val)) {
              return (Number(prev) + Number(curr)).toFixed(1)
            } else {
              return Number(prev).toFixed(1)
            }
          }, 0);
          if(this.tab==="0"){
            var html444 = <div class="borders">{num333}</div>
            var html555 = <div class="borders1">{num444}</div>
            var html666 = <div class="borders2">{num444Gap}</div>
            sums[index] = [html444,html555,html666] 
          }if(this.tab==="1"){
            var word444 = <div>{num333}</div>
            sums[index] = [word444];
          }if(this.tab==="2"){
             var word444 = <div>{num444}</div>
            sums[index] = [word444];
          }if(this.tab==="3"){
             var word444 = <div>{num444Gap}</div>
            sums[index] = [word444];
          }
        }
        }
        
      });
      return sums;
    },
    changeDateRange3(e){
      let arr = []
      let arr1 = []
      let startData = e[0]
      let endData = e[1]
      var YY11 = startData.getFullYear() 
      var MM11 = (startData.getMonth() + 1 < 10 ? '0' + (startData.getMonth() + 1) : startData.getMonth() + 1) ;
      arr.push(YY11 , MM11)
      arr = arr.map(v=>{
        if (v[0] == "0") {
          return (v = v.slice(1));
        } else {
          return v;
        }
      })
      let startTime = arr.join("-")

      var YY22 = endData.getFullYear() 
      var MM22 = (endData.getMonth() + 1 < 10 ? '0' + (endData.getMonth() + 1) : endData.getMonth() + 1) ;
      arr1.push(YY22 , MM22)
      arr1 = arr1.map(v=>{
        if (v[0] == "0") {
          return (v = v.slice(1));
        } else {
          return v;
        }
      })
      let endTime = arr1.join("-")
      this.paramsData3['start_date'] = startTime
      this.paramsData3['end_date'] = endTime
      this.current3 = 1
      this.getTableData3()
    },
    tecAreaSearch3(val){
      let tempArr = []
      let tempArr1 = this.$refs.tree2.getCheckedNodes()
      tempArr1.map(val => {
        tempArr.push(val.value)
      })
      val.map(item => {
        tempArr.push(item[item.length-1])
      })
      tempArr=Array.from(new Set(tempArr))
      this.paramsData3['technical_field_ids'] = tempArr
      this.current3 = 1
      this.getTableData3()
    },
    // getTecAreaOptions3() {
    //   this.$axios({
    //     url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
    //     method: "get",
    //     headers: getHeaderName(),
    //   }).then(res => {
    //     this.tecAreaOptions3 = res.data.data
    //   })
    // },
    cusDeptSearch3(val){
      this.paramsData3["kh_zh"] = val
      this.current3 = 1
      this.getTableData3()
    },
    // getCusDept3(){
    //   this.$axios({
    //       url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kh_zh_tree_list',
    //       method: "get",
    //       headers: getHeaderName(),
    //     }).then(res => {
    //       if(res.data.code === 200) {
    //         this.cusDeptOptions3 = res.data.data
    //       }
    //     })
    // },
    recourseSearch3(e){
        if(e==="需求"){
          this.tab3 = '1'
        }
        if(e==="供给"){
          this.tab3 = '2'
        }
        if(e==="GAP"){
          this.tab3 = '3'
        }
        if(e===''){
            this.tab3 = '0'
        }
    },
    proStatusSearch3(val){
      this.paramsData3["status"] = val
      this.current3 = 1
      this.getTableData3()
    },
    // getProStatusOption3(){
    //    this.$axios({
    //       url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/status_tree_list',
    //       method: "get",
    //       headers: getHeaderName(),
    //     }).then((res) => {
    //       if(res.data.code === 200) {
    //         this.ProStatusOption3 = res.data.data
    //       }
    //     })
    // },
    tecSearch3(){},
    getTecOptions3(){ },
    getDeptOptions3(){
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/tree_list',
          method: "get",
          headers: getHeaderName(),
        }).then((res) => {
          if(res.data.code === 200) {
            this.deptOptions3 = res.data.data
          }
        })
    },
    deptSearch3(val){
      let praProId = []
      val.map(v => {
        praProId.push(v[1])
      })
      this.paramsData3["project_ids"] = praProId
      this.current3 = 1
      this.getTableData3()
    },
    handleCurrentChange3(val) {
      this.current3 = val;
      this.getTableData3()
    },
    handleSizeChange3(val){
    },
    getTableData3(){
       this.loading3 = true
       this.paramsData3["page"] = this.current
       this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/data',
          method: "post",
          headers: getHeaderName(),
          data:this.paramsData3
        }).then((res => {
          if(res.data.code === 200){
            this.loading3 = false
            this.tableData3 = res.data.data.data
            this.monthRange3 = res.data.data.month_range
            this.SsbmOptions = res.data.data.demand_depts
            this.total3 = res.data.data.totalCount
          }else{
            this.loading3 = false
            this.$message.error('请求出错')
          }
        }))
    },
    getProdunctionOptions(){
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_core',
        method: "get",
        headers: getHeaderName(),
        }).then(res => {
          this.ProdunctionOptions = res.data.data
        })
    },
    getTecAreaOptions() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.tecAreaOptions = res.data.data
        })
    },
    getCusDept(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/kh_zh_tree_list',
            method: "get",
            headers: getHeaderName(),
            }).then(res => {
            if(res.data.code === 200) {
                this.cusDeptOptions = res.data.data
            }
        })
    },
    getProStatusOption(){
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_project/status_tree_list',
            method: "get",
            headers: getHeaderName(),
            }).then((res) => {
            if(res.data.code === 200) {
                this.ProStatusOption = res.data.data
            }
        })
    },
    // handleClick(tab, event) {
    //   this.tabName = tab.name
    // },



    filterStatus(e){
      this.pramData['status'] = e
      this.params.pageNo = 1
      this.getTableData()
    },
    down(res, name) {
        this.loading = true
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project_info_to_excel',
          method: "get",
          headers: getHeaderName(),
          responseType: 'blob',
        }).then(res => {
          if(res.status === 200) {
            const blob = new Blob([res.data]);
            const fileName = '资源看板-业务维度(项目列表).xls';
            // for IE
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
              // for Non-IE (chrome, firefox etc.)
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
              this.loading = false
              this.$message({
              type:"success",
              message:"导出成功!"
            })
          }
          } else {
            this.loading = false
            this.$message.error('下载出错了!'); 
          }
        }).catch(err => {
            this.$message.error('下载出错了!'); 
            this.loading = false
        })
      },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    pageSizeChange1(val) {
      this.params.pageSize = val
      this.getTableData()
    },
    pageNoChange1(val) {
      this.params.pageNo = val
      this.getTableData()
    },
    searchPro(e){
      this.projectList = [] // 清空参数
      e.map((v,i) => {
        this.projectList.push(v[1])
      })
      this.params.pageNo = 1
      this.getTableData()
    },
    week2date(val) {
        let arr = val.split("-")
        let year = arr[0]
        let week = arr[1]
        let betDay = new Date(year+1+'-01-01 00:00:00').getTime() - new Date(year+'-01-01 00:00:00').getTime()
        let newD1 = new Date(year,0,1)
        let newD2 = new Date(year,11,31)
        let dayMS=24*60*60*1000
        let firstDay=firstDay=(7-newD1.getDay())*dayMS
        let weekMS=0
        if(newD1.getDay() < 4) {
            weekMS=(week-2)*7*dayMS
        } else {
            weekMS=(week-1)*7*dayMS
        }
        let result=newD1.getTime()+firstDay+weekMS+5*dayMS
        newD1.setTime(result)
         return val + '周\n(' + newD1.getFullYear() + "/" + (newD1.getMonth()+1) + "/" +newD1.getDate() + ')'
    },
    defaultWeekTime() {
        let startD = new Date()
        let endD = new Date()
        endD.setMonth(endD.getMonth() + 1)
        let beginDate = startD.getFullYear()+'-'+(startD.getMonth()+1)+'-'+startD.getDate()
        let endDate = endD.getFullYear()+'-'+(endD.getMonth()+1)+'-'+endD.getDate()
        this.dateRange = [beginDate,endDate]
        this.dateRange1 = [beginDate,endDate]
        this.weekList = DateUtil.estLabourWeek(beginDate,endDate)
        this.weekList1 = DateUtil.estLabourWeek(beginDate,endDate)
    },
    changeDateRange(e) {
      let list = []
      if(e) {
        list = DateUtil.estLabourWeek(e[0],e[1])
      }
      this.pramData.pageNo = 1
      this.weekList = list
      this.getTableData()
    },
    getOptions(){
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project_list',
          method: "get",
          headers: getHeaderName(),
      }).then((res => {
          this.singleSelector = res.data.message
      }))
    },
    getTableData(){ 
      this.loading = true
      this.pramData['week_range'] = this.weekList.join()
      this.pramData['project_ids'] = this.projectList
      this.pramData['pageNo'] = this.params.pageNo
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project_info',
          method: "post",
          headers: getHeaderName(),
          data:this.pramData
      }).then((res => {
        if(res.data.code === 200){
          this.loading = false
          this.tableData = res.data.data.form_data
          this.tableTotal = res.data.data.totalCount
        }else{
          this.loading = false
          this.$message.error(res.data.message)
        } 
      }))
  }
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-table .warning-row {
    background: oldlace;
  }
/deep/.el-table--enable-row-transition .el-table__body td {
  padding: 0px;
  height: 43px
}
/deep/th.gutter{
  width:  23px !important;
  display: block !important;
}
/deep/td:first-child .cell {
    // padding-left: 10px;
    padding: 15px 0 15px 10px;
}

.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    // margin-right: 10px;
    line-height: 36px;
  }
}
.bordersA{
  border-bottom: 1px solid #c5c4c1;
  height: 40px;
  width: 183px;
  margin-left: -14px;
  margin-top:10px;
  // margin-bottom:10px;
}
#gapsum {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  //   .btn-group {
  //     position: relative;
  //     .edit {
  //       position: absolute;
  //       top: 50%;
  //       right: -2%;
  //       transform: translate(-50%, -50%);
  //     }
  //   }
}
/deep/.el-table__body-wrapper{
    z-index: 2
}
// #GAPForms{
//   .tabWidth{
//       width:500px
//   }
  label {
    color:  #2b2f32;
    font-weight: bold;
  };
  .form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 0.9rem;
    box-shadow: none;
    margin-bottom: 10px
  };
  .borders{
    border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    
    // margin-bottom:10px;
  };
  .borders1{
    border-bottom: 1px solid #c5c4c1;
    height: 32px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
  .borders2{
    // border-bottom: 1px solid #c5c4c1;
    height: 25px;
    width: 120%;
    margin-left: -14px;
    margin-top:10px;
    // margin-bottom:10px;
  };
// }
</style>